import { defineStore } from 'pinia'
import { markRaw, reactive, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { Me, Newlybuild, CollectionRecords, Performance, Layers, Search, VideoTwo } from '@icon-park/vue-next'

interface SubMenu {
  label: string
  value: string
  icon: any
}
interface Menu {
  label: string
  value: string
  children: SubMenu[]
}

// setup 写法 next 版本的 vue-router 只能用在 setup 中
export const useMenuStore = defineStore(
  'menu',
  () => {
    const router = useRouter()
    const menuList: Menu[] = reactive([
      {
        label: '发现音乐',
        value: 'discover',
        children: [
          {
            label: '推荐',
            value: 'recommendation',
            icon: markRaw(Layers),
          },
          {
            label: '搜索',
            value: 'searchIndex',
            icon: markRaw(Search),
          },
          {
            label: '音乐馆',
            value: 'selected',
            icon: markRaw(Performance),
          },
          {
            label: '视频',
            value: 'mv',
            icon: markRaw(VideoTwo),
          },
        ],
      },
      {
        label: '我的音乐',
        value: 'myMusic',
        children: [
          {
            label: '我的歌手',
            value: 'mySinger',
            icon: markRaw(Me),
          },
          {
            label: '创建的歌单',
            value: 'createdPlayList',
            icon: markRaw(Newlybuild),
          },
          {
            label: '收藏的歌单',
            value: 'collectionPlayList',
            icon: markRaw(CollectionRecords),
          },
        ],
      },
    ])
    const currentValue = ref('recommendation')

    const changeRoute = (menu: SubMenu) => {
      currentValue.value = menu.value
      router.push({
        name: menu.value,
      })
    }

    return {
      menuList,
      currentValue,
      changeRoute,
    }
  },
  {
    persist: {
      enabled: true,
      strategies: [
        { storage: localStorage, key: 'menuInfo' }, //整个状态存贮在 key 下的 localStorage 中
      ],
    },
  }
)
